<div id="yui-main">
    <div class="yui-b">
        <div class="yui-g">
            <table id="editgrid"></table>
            <div id="pager"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#editgrid").jqGrid({
            url:'<?=base_url();?>index.php/admin/categorias/post',
            datatype: 'json',
            mtype: 'POST',
            colNames:['id','category_name','seo','products_per_row','products_per_row_1','impuestos','spanish','english','italy','portugues'],
            colModel :[
                {name:'id', index:'id', width:90,editable:false,editoptions:{size:10}},
                {name:'category_name', index:'caregory_name', width:90,editable:true,editoptions:{size:10}},
                {name:'category_flypage', index:'category_flypage', width:90,editable:true,editoptions:{size:10}},
                {name:'products_per_row', index:'products_per_row', width:90,editable:true,editoptions:{size:10}},
                {name:'products_per_row_1', index:'products_per_row_1', width:90,editable:true,editoptions:{size:10}},
                {name:'impuestos', index:'impuestos', width:90,editable:true,editoptions:{size:10}},
                {name:'spanish', index:'spanish', width:90,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
                {name:'english', index:'english', width:90,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
                {name:'italy', index:'italy', width:90,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
                {name:'portugues', index:'portugues', width:90,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
            ],
            pager: '#pager',
            rowNum:20,
            rowList:[10,20,30],
            sortname: 'nombre',
            sortorder: 'desc',
            viewrecords: true,
            caption: 'Internos',
            height:'100%',
            width:1200,
            editurl:"<?=base_url();?>index.php/admin/categorias/guardar",

            subGrid: true, caption: "Categorias", subGridRowExpanded: function(subgrid_id, row_id) {
                //// we pass two parameters
                //// subgrid_id is a id of the div tag created whitin a table data
                //// the id of this elemenet is a combination of the "sg_" + id of the row
                //// the row_id is the id of the row
                //// If we wan to pass additinal parameters to the url we can use
                //// a method getRowData(row_id) - which returns associative array in type name-value
                //// here we can easy construct the flowing
                var subgrid_table_id,
                pager_id;
                subgrid_table_id = subgrid_id+"_t";
                pager_id = "p_"+subgrid_table_id;
                $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
                jQuery("#"+subgrid_table_id).jqGrid({
                    //url:"subgrid.php?q=2&id="+row_id,
                    url:'<?=base_url();?>index.php/admin/categorias/post1/'+row_id,
                    datatype: "json",
                    mtype: 'POST',
                    colNames:['id','category_name','seo','products_per_row','products_per_row_1','spanish','english','italy','portugues'],
                    colModel :[
                        {name:'id', index:'id', width:90,editable:false,editoptions:{size:10}},
                        {name:'category_name', index:'caregory_name', width:90,editable:true,editoptions:{size:10}},
                        {name:'category_flypage', index:'category_flypage', width:90,editable:true,editoptions:{size:10}},
                        {name:'products_per_row', index:'products_per_row', width:90,editable:true,editoptions:{size:10}},
                        {name:'products_per_row_1', index:'products_per_row_1', width:90,editable:true,editoptions:{size:10}},
                        {name:'spanish', index:'spanish', width:90,editable:true,editoptions:{size:10}},
                        {name:'english', index:'english', width:90,editable:true,editoptions:{size:10}},
                        {name:'italy', index:'italy', width:90,editable:true,editoptions:{size:10}},
                        {name:'portugues', index:'portugues', width:90,editable:true,editoptions:{size:10}},
                    ],
                    rowNum:20,
                    pager: pager_id,
                    sortname: 'num',
                    sortorder: "asc",
                    height: '100%',
                    width: 1200,
                    editurl:"<?=base_url();?>index.php/admin/categorias/guardar1/"+row_id,


                    subGrid: true, caption: "Sub-Categorias", subGridRowExpanded: function(subgrid_id, row_id) {
                        var subgrid_table_id,
                        pager_id;
                        subgrid_table_id = subgrid_id+"_t";
                        pager_id = "p_"+subgrid_table_id;
                        var lastsel; 
                        $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
                        jQuery("#"+subgrid_table_id).jqGrid({
                            //url:"subgrid.php?q=2&id="+row_id,
                            url:'<?=base_url();?>index.php/admin/categorias/post2/'+row_id,
                            datatype: "json",
                            mtype: 'POST',
                            colNames:['Id','Publicado','Codigo','SEO','Desc-corta','Stock','Ofertas','Precio','Imagen','Cant img','spanish-s','spanish','english-s','english','italy-s','italy','portugues-s','portugues'],
                            colModel :[
                                {name:'product.product_id', index:'product.product_id', width:90,editable:false,editoptions:{size:10}},
                                {name:'product_publish', index:'product_publish', width:90,editable:true,editoptions:{size:10}},
                                {name:'product_sku', index:'product_sku', width:90,editable:true,editoptions:{size:10}},
                                {name:'product_desc', index:'product_desc', width:90,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
                                {name:'product_name', index:'product_name', width:90,editable:true,editoptions:{size:10}},
                                {name:'product_in_stock', index:'product_in_stock', width:90,editable:true,editoptions:{size:10}},
                                {name:'product_discount_id', index:'product_discount_id', width:90,editable:true,editoptions:{size:10}},
                                {name:'product_price', index:'product_price', width:90,editable:true,editoptions:{size:10}},
                                {name:'image', index:'product_price', width:90,editable:false,editoptions:{size:10}},
                                {name:'product_full_image', index:'product_full_image', width:90,editable:true,editoptions:{size:10}},
                                {name:'spanish_s', index:'spanish_s', width:90,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
                                {name:'spanish', index:'spanish', width:90,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
                                {name:'english_s', index:'english_s', width:90,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"40"}},
                                {name:'english', index:'english', width:90,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"40"}},
                                {name:'italy_s', index:'italy_s', width:90,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"40"}},
                                {name:'italy', index:'italy', width:90,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"40"}},
                                {name:'portugues_s', index:'portugues_s', width:90,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"40"}},
                                {name:'portugues', index:'portugues', width:90,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"40"}},
                            ],
                            rowNum:100,
           rowList:[100,200,300],
                             pager: pager_id,
                            sortname: 'num',
                            sortorder: "asc", height: '100%',
                            onSelectRow: function(id){ 
                                // if(id && id!==lastsel){
                                jQuery('#editgrid_1_t_'+row_id+'_t').jqGrid('restoreRow',lastsel);
                                jQuery('#editgrid_1_t_'+row_id+'_t').jqGrid('editRow',id,true); lastsel=id;
                                // }
                            },
                            editurl:"<?=base_url();?>index.php/admin/categorias/guardar2/"+row_id
                        });
                        jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:true,add:true,del:true})
                    },
                    subGridRowColapsed: function(subgrid_id, row_id) {
                        // this function is called before removing the data
                        // //var subgrid_table_id;
                        // //subgrid_table_id = subgrid_id+"_t";
                        //jQuery("#"+subgrid_table_id).remove(); }
                    }
                });
                jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:true,add:true,del:true})
            },
            subGridRowColapsed: function(subgrid_id, row_id) {
                // this function is called before removing the data
                // //var subgrid_table_id;
                // //subgrid_table_id = subgrid_id+"_t";
                //jQuery("#"+subgrid_table_id).remove(); }
            }
        });
        jQuery("#editgrid").jqGrid('navGrid',"#pager",{edit:true,add:true,del:true});
        //jQuery("#editgrid").jqGrid('gridResize',{minWidth:850,maxWidth:900,minHeight:80, maxHeight:350});
    });
</script>












